<script setup>
import AllCategory from './components/AllCategory.vue';
import CategoryBanner from './components/CategoryBanner.vue';
import CategoryItem from './components/CategoryItem.vue';

import { useCategory } from './composables/useCategory'
import Bread from '@/components/Bread.vue';

import { nanoid } from 'nanoid'

const { categoryData } = useCategory()

</script>
<template>
   <div class="category">
      <div class="container">
         <Bread :breadList="[
            {
               id: nanoid(),
               name: categoryData.name,
               path: null
            }
         ]" />
         <CategoryBanner />
         <AllCategory :categoryData="categoryData" />
         <CategoryItem v-for="item in categoryData.children" :key="item.id" :categoryItem="item" />
      </div>
   </div>
</template>

<style lang="scss" scoped></style>